<template>
	<a-layout-content
			style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
		<!--                <right-top icon="2.png" :text="text">-->
		<right-top icon="2.png" :text="eventName" v-if="infoFlag">
			<a-tabs default-active-key="1" style="position: absolute;right: 40px;top: 22px;font-weight: 400;"
			        size="small"
			        @change="callback">
				<a-tab-pane key="1" tab="事件数据"></a-tab-pane>
				<a-tab-pane key="2" tab="统计分析" force-render></a-tab-pane>
			</a-tabs>
		</right-top>
		<div class="right-content" v-show="change==1" v-if="infoFlag">
			<!--第一块-->
			<div style="" class="divOne">
				<div style="width: 95%;display: flex;justify-content: space-around;align-items: center">
					<div style="width: 75%;padding-left: 5%;">
						<div
								style="font-size: 16px;font-weight: bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: center;"
								:title="listInfo.title" id="infoTitle">{{ listInfo.title }}
						</div>
					</div>
					<div style="display: flex;width: 21%;">
						<!-- 情感极性 -->
						<img v-if="listInfo.emotionalPolarity == 3"
						     src="../../assets/images/system/jixing-fu.png"
						     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>
						<img v-else-if="listInfo.emotionalPolarity == 2"
						     src="../../assets/images/system/jixing-zhong.png"
						     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>
						<img v-else src="../../assets/images/system/jixing-zheng.png"
						     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>

						<img src="../../assets/images/generalDetection/6.png"
						     style="width: 20px;height: 20px;margin-top: 6%;"/>
						<span style="margin-top: 5%;font-size: 18px;margin-left: 1%;">{{ listInfo.number }}</span>
						<!-- 镜像 -->
						<img v-if="listInfo.mirrorAddress != null" title="镜像"
						     src="../../assets/images/system/jingxiang-1.png"
						     @click="jingxiang(listInfo.mirrorAddress)"
						     style="position: relative;margin: 0 5px;display: inline-block;cursor: pointer;;margin-top: 5%;margin-left: 5%;width: 25px;height:25px;"/>
						<img v-else title="镜像" src="../../assets/images/system/jingxiang-2.png"
						     style="position: relative;margin: 0 5px;display: inline-block;cursor: pointer;;margin-top: 5%;margin-left: 5%;width: 25px;height:25px;"/>
						<a-button style="width: 60px;margin-left: 3%;margin-top: 5%;" @click="goHomePage">
							返回
						</a-button>
					</div>
				</div>
				<div style="width: 100%;height: 45%;margin-top: 1%;">
					<div style="display: flex;">
						<div style="width: 20%;margin-left: 6%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
						     :title="listInfo.informationSources">发布媒体：{{ listInfo.informationSources }}
						</div>
						<div style="width: 20%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
						     :title="listInfo.author">作者：{{ listInfo.author }}
						</div>
						<div style="width: 20%;">级别推断：
							<span v-if="listInfo.levelInference ==3"
							      style="color: #FE3328;">重要级别</span>
							<span v-else-if="listInfo.levelInference ==1"
							      style="color: #51AE43;">一般级别</span>
							<span v-else-if="listInfo.levelInference ==2"
							      style="color: #5698FE;">中等级别</span>
							<span v-else-if="listInfo.levelInference ==3"
							      style="color: #FF8746;">重要级别</span>
						</div>
						<div style="width: 20%;">发布时间：{{ listInfo.releaseTime }}
							   
						</div>
						<div style="width: 20%;">
							<a style="color: #297BE9;"
							   :href="listInfo.url"
							   :title="listInfo.url"
							   target="_blank">查看原文>></a>
						</div>

					</div>
					<div style="display: flex;margin-top: 1%;">
						<div style="margin-left: 6%;width: 18.7%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
						     :title="listInfo.caseType">
							事件分类：{{ listInfo.caseType }}
						</div>
						<div style="width: 18.8%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
							转发量：{{ listInfo.forwardVolume }}
						</div>
						<div style="width: 18.8%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
							评论量：{{ listInfo.commentVolume }}
						</div>
						<div style="">访问量：{{ listInfo.visitVolume }}</div>
					</div>
					<div style="display: flex;margin-top: 1%">
						<div style="margin-left: 6%;">关键词：<span
								style="color: orange">{{ listInfo.keyword }}</span>
						</div>
					</div>
				</div>
			</div>
			<!--第二块-->
			<div style="padding-bottom: 3%;" class="divTwo">
				<div style="margin-left: 6%;width: 85%;">
					<img :src="listInfo.img" alt=""
					     style="padding-left: 20%;padding-top: 1%;padding-bottom: 1%;">
					<div style="padding-top: 1%;line-height: 30px;" id="infoContent"><span
							style="padding-left: 3%"></span>{{ listInfo.content }}
					</div>
				</div>
			</div>
		</div>

		<div class="right-content" v-show="change==1" v-if="similarInfoFlag">
			<similarListInfo v-bind:similarId="similarId" v-bind:parent="parentInfo"></similarListInfo>
		</div>
		<div class="right-content" v-show="change==2">
			<Statistics v-bind:queryObj="queryLevel" v-bind:commandId="commandIds"></Statistics>
		</div>
		<!-- 镜像模态框 -->
		<a-modal class="modal-box2" v-model="visible2" title="镜像" width="1300px" @ok="hideModal3" ok-text="关闭"
		         style="height:500px" :cancel-button-props="{ style: { display: 'none' } }">

			<div class="modal-body2" style="overflow: unset;padding: 0px;height:564px">
				<iframe :src="mirrorUrl" style="height: 100%;width: 100%;" name="mirror"></iframe>
			</div>

		</a-modal>
	</a-layout-content>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {getOneEventType, getThreeEventType, getTwoEventType} from '@/api/eventAnalyze/eventAnalyze'
import '@/utils/wordCloud'
import statistics from '@/views/eventAnalyze/eventAnalyzeStatistics.vue'
import similarListInfo from '@/views/eventAnalyze/similarListInfo.vue'
import {getSimilarList} from '@/api/eventAnalyze/eventAnalyzeResults'

export default {
	name: "eventAnalyzeInfo",
	components: {
		left,
		rightTop,
		Statistics: statistics,
		similarListInfo: similarListInfo,
	},
	data() {
		return {
			visible2: false,
			mirrorUrl: '',
			parentInfo: this,
			change: 1,
			similarlist: [], //相识列表数据
			total: 0,// 相识列表数量
			infoFlag: true,// 当前详情页
			similarInfoFlag: false,// 相似详情页
			listInfo: this.evenInfo, //详情数据
			text: '', //标题
			similarId: null,// 相识列表详情id
			oneLevel: [], // 获取一级分类
			event_name: '', // 事件分类名称
			eventName: '',
			commandIds: 0,
		}
	},
	watch: {
		eventName(n, o) { //n为新值,o为旧值;
			this.eventName = n;
		},
		commandId(n, o) {
			this.commandIds = n;
		},
		commandId2(n, o) {
			this.commandIds = n;
		},
	},
	props: {
		// 详情对象
		evenInfo: {
			type: Object,
		},
		// 父类this
		parent: {
			type: Object,
		},
		// 统计查询用的对象
		queryLevel: {
			type: Object,
		},
		eventName: {
			type: String,
		},
		commandId: {
			type: Number,
		},
		commandId2: {
			type: Number,
		},
		activeIndex: {
			type: Number,
		},
	},
	methods: {
		hideModal3() {
			this.visible2 = false
		},
		jingxiang(url) {
			console.log(url);
			this.mirrorUrl = url;
			this.visible2 = true;

		},

		// 返回按钮
		goHomePage() {
			this.parent.eventAnalyze_info = false;
			this.parent.wlzp = true;
		},

		// 相似列表
		similarInfo(id) {
			this.infoFlag = false;
			this.similarInfoFlag = true;
			this.similarId = id;
		},

		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;


			}
		},
	},
	mounted() {
		// 详情相识列表
		getSimilarList({
			title: this.listInfo.title
		}).then(res => {
			this.similarlist = res.data;
			this.total = res.data.length;
		});
		getOneEventType().then(res => {
			this.oneLevel = this.listInfo.oneEventClass;
			// 获取事件名称
			for (let j = 0; j < this.oneLevel.length; j++) {
				if (this.listInfo.oneEventClass == this.oneLevel[j].id) {
					// 获取一级事件名称
					this.listInfo.caseType = this.oneLevel[j].name;
					// 获取二级事件名称
					if (this.listInfo.twoEventClass) {
						getTwoEventType({
							oneEventType: this.listInfo.oneEventClass,
						}).then(res1 => {
							var twoArray = [];
							twoArray = res1.data;
							for (let k = 0; k < twoArray.length; k++) {
								if (this.listInfo.twoEventClass == twoArray[k].id) {
									this.listInfo += "--" + twoArray[k].name;
								}
							}

							// 获取三级事件名称
							if (this.listInfo.threeEventClass) {
								getThreeEventType({
									twoEventType: this.listInfo.twoEventClass,
								}).then(res2 => {
									var threeArray = [];
									threeArray = res2.data;
									for (let k = 0; k < threeArray.length; k++) {
										if (this.listInfo.threeEventClass == threeArray[k].id) {
											this.listInfo.caseType += "--" + threeArray[k].name;
										}
									}
								})
							}
						});
					}

				}
			}
		});


		var contents = this.listInfo.content;
		var keyword = this.listInfo.keyword;
		var title = this.listInfo.title;

		let split = keyword.split(",");
		let textContent = "";
		let textTitle = "";
		// 判断标题和文本是否有关键字
		for (let i = 0; i < split.length; i++) {
			if (i == 0) {
				var values = contents.split(split[i]);
				var values2 = title.split(split[i]);

				textTitle = (values2.join('<span style="color:orange;">' + split[i] + '</span>'))
				textContent = ("<span style=\"padding-left: 3%\"></span>" + values.join('<span style="color:orange;">' + split[i] + '</span>'))
			} else {
				var values = textContent.split(split[i]);
				var values2 = textTitle.split(split[i]);

				textTitle = (values2.join('<span style="color:orange;">' + split[i] + '</span>'))
				textContent = ("<span style=\"padding-left: 3%\"></span>" + values.join('<span style="color:orange;">' + split[i] + '</span>'))
			}
		}
		$("#infoContent").html(textContent);
		$("#infoTitle").html(textTitle);

	},


}
</script>

<style scoped lang="scss">
.modal-box2 /deep/ .ant-modal-body {
	min-height: 594px;
}

.modal-box2 /deep/ .ant-modal-content {
	height: 700px;
}

.modal-box /deep/ .ant-modal-body {
	min-height: 144px;
}

.modal-box /deep/ .ant-modal-content {
	height: 250px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	/*border: solid #F0F0F0 1px;*/
	/*text-align: center;*/
	/*padding-left: 1%;*/
	/*padding-right: 1%;*/
	/*margin-right: 1%;*/
	margin: 0 5px;
	color: black;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

input[type=checkbox]:checked + label:before { /*before为伪元素可以在元素之后添加内容*/
	display: block;
	/*	css3中的content字符编码*/
	content: "";
	/*	复选框里面的&radic;居中*/
	text-align: center;
	/*	复选框里面的&radic;大小*/
	font-size: 13px;
	/*	字体的颜色*/
	color: #3D8EF7;
	/*  复选框勾选后的背景颜色*/
	background: #3D8EF7;
	margin-left: 3px;
	margin-top: 3px;
	height: 10px;
	width: 10px;
}

input[type=checkbox] {
	/* visibility 属性规定元素是否可见*/
	visibility: hidden;
}

.checkboxClass {
	width: 18px;
	height: 18px;
	line-height: 18px;
	cursor: pointer;
	position: relative;
	border: 1px solid #ccc; /*改变复选框的边框颜色也可以不要边框*/
	display: inline-block;
}

.topDiv {
	border-bottom: 1px solid #dcdcdc;
	width: 90%;
	height: 60px;
	margin-left: 5%;
	padding-left: 10px;
	line-height: 60px;
	display: flex
}

.titleDiv {
	height: 40px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	margin-left: 5%;
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

/deep/ .ant-timeline-item-head-custom {
	background: transparent !important;
}

.angle-wrapper:before {
	content: '';
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-right-color: #eeeeee;
	position: absolute;
	left: calc(-2% - 5px);
	top: 50%;
	margin-top: -12px;
}

.angle-wrapper:after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #FFFFFF;
	position: absolute;
	left: calc(-2% - 1px);
	top: 50%;
	margin-top: -10px;
}

.angle-wrapper {
	width: 93%;
	height: 40px;
	position: relative;
	border: 2px solid #eeeeee;
	margin-left: 2%;
	background-color: white;
	line-height: 30px;
	padding-left: 15px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

.angle-wrapper-bottom {
	display: flex;
	margin-top: 5px;
	justify-content: space-between;
	width: 70%;
	font-size: 12px;
	margin-left: 4%
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.tableTr {
	border: 1px solid #F5F8FF;
	height: 35px;
	width: 100%;
	background-color: white;
	display: flex;
	align-items: center;
	color: #A0A4AA;
}

.tableTd20 {
	width: 20%;
	text-align: center
}

.tableTd30 {
	width: 30%;
	text-align: center
}

.tableTd50 {
	width: 50%;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

/deep/ .ant-table-tbody > tr:nth-child(even) {
	background-color: #FAFAFA;
}

/deep/ .ant-table-tbody > tr > td {
	border: 0;
}

/deep/ .ant-table-thead > tr > th {
	background-color: white;
	font-weight: bold;
}

.ant-btn-primary {
	color: #ffffff;
}
</style>
